<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>团广首页</title>
    <meta name="hotcss" content="max-width=750">
    <link rel="stylesheet" href="./css/index.min.css">
    <script src="./js/hotcss.js"></script>
    <link rel="stylesheet" href="./css/index-con.min.css">
    <link rel="stylesheet" href="./css/searchBox.min.css">
    <link rel="stylesheet" href="./css/loginPage.min.css">
    <link rel="stylesheet" href="./css/logined.min.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <!-- <script src="https://unpkg.om/swiper/swiper-bundle.js"> </script> -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    <style>
        /* .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-pagination-bullet{
            width: .25rem;
            height: .25rem;
        }
        .swiper-pagination-bullet.swiper-pagination-bullet-active{
            background-color: #b60005;
            opacity: 1;
        }
        .swiper-pagination-bullet{
            background-color: #b1acb1;
            opacity: 1;
        } */
    </style>
</head>

<body>
    <div class="container">
        <header class="header">
            <div class="login">
                <img class="menu" src="./image/common_menu.png" alt="">
            </div>
            <!-- <img class="logo" src="./image/logo.png" alt=""> -->
            <div class="search" id="search">
                <img src="./image/common_search.png" alt="">
            </div>
        </header>
        <div class="content">
            <div class="banner">
                <!-- <img src="./image/01.jpg" alt=""> -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./image/01.jpg" alt="" >
                           <div class="text">
                               <p>省广股份携手阿里妈妈举行DT大时代 全息营销全息营销全息营销全息营销全息营销全息营销</p>
                               <div class="text-mes">
                                   <div class="like">
                                       <img src="./image/like_w.png" alt="">
                                       120
                                   </div>
                                   <div class="watch">
                                       <img src="./image/eye_w.png" alt="">
                                       560
                                   </div>
                                   <div class="time">
                                       12月26日 07:00:00
                                   </div>
                               </div>
                           </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="./image/01.jpg" alt="" >
                           <div class="text">
                               <p>省广股份携手阿里妈妈举行DT大时代 全息营销全息营销全息营销全息营销全息营销全息营销</p>
                               <div class="text-mes">
                                   <div class="like">
                                       <img src="./image/like_w.png" alt="">
                                       120
                                   </div>
                                   <div class="watch">
                                       <img src="./image/eye_w.png" alt="">
                                       560
                                   </div>
                                   <div class="time">
                                       12月26日 07:00:00
                                   </div>
                               </div>
                           </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="./image/01.jpg" alt="" >
                           <div class="text">
                               <p>省广股份携手阿里妈妈举行DT大时代 全息营销全息营销全息营销全息营销全息营销全息营销</p>
                               <div class="text-mes">
                                   <div class="like">
                                       <img src="./image/like_w.png" alt="">
                                       120
                                   </div>
                                   <div class="watch">
                                       <img src="./image/eye_w.png" alt="">
                                       560
                                   </div>
                                   <div class="time">
                                       12月26日 07:00:00
                                   </div>
                               </div>
                           </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="./image/01.jpg" alt="" >
                           <div class="text">
                               <p>省广股份携手阿里妈妈举行DT大时代 全息营销全息营销全息营销全息营销全息营销全息营销</p>
                               <div class="text-mes">
                                   <div class="like">
                                       <img src="./image/like_w.png" alt="">
                                       120
                                   </div>
                                   <div class="watch">
                                       <img src="./image/eye_w.png" alt="">
                                       560
                                   </div>
                                   <div class="time">
                                       12月26日 07:00:00
                                   </div>
                               </div>
                           </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>

            <div class="news">
                <div class="items">
                    <div class="left">
                        <p>#苍井空#互联网卖内衣全球
                            引爆声量飙至7.9亿
                        </p>
                        <div class="bottom">
                            <div class="like">
                                <img src="./image/like_g.png" alt="">
                                120
                            </div>
                            <span class="time">
                                2小时前 [案例观点]
                            </span>
                        </div>
                    </div>
                    <div class="right">
                        <img src="./image/article_02.jpg" alt="">
                    </div>
                </div>
                <div class="items">
                    <div class="left">
                        <p>#苍井空#互联网卖内衣全球
                            引爆声量飙至7.9亿
                        </p>
                        <div class="bottom">
                            <div class="like">
                                <img src="./image/like_g.png" alt="">
                                886
                            </div>
                            <span>
                                5小时前 [案例观点]
                            </span>
                        </div>
                    </div>
                    <div class="right">
                        <img src="./image/article_03.jpg" alt="">
                    </div>
                </div>
                <div class="items2">
                    <p>苍井空#互联网卖内衣全球
                        引爆声量飙至7.9亿</p>
                    <div class="pic">
                        <img src="./image/article_04.jpg" alt="">
                        <img src="./image/article_04.jpg" alt="">
                        <img src="./image/article_04.jpg" alt="">
                    </div>
                    <div class="bottom">
                        <div class="author">
                            <img src="./image/baga1.png" alt="">
                        </div>
                        陈正光
                        <div class="comment">
                            <img src="./image/pinglun.png" alt="">
                            6848
                        </div>
                        <div class="like">
                            <img src="./image/like_g.png" alt="">
                            4808
                        </div>
                        <div class="time"> 2天前 [案例观点]</div>
                    </div>
                </div>
                <div class="items">
                    <div class="left">
                        <p>#苍井空#互联网卖内衣全球
                            引爆声量飙至7.9亿
                        </p>
                        <div class="bottom">
                            <div class="like">
                                <img src="./image/like_g.png" alt="">
                                886
                            </div>
                            <span>
                                5小时前 [案例观点]
                            </span>
                        </div>
                    </div>
                    <div class="right">
                        <img src="./image/article_03.jpg" alt="">
                    </div>
                </div>
                <div class="items">
                    <div class="left">
                        <p>#苍井空#互联网卖内衣全球
                            引爆声量飙至7.9亿
                        </p>
                        <div class="bottom">
                            <div class="like">
                                <img src="./image/like_g.png" alt="">
                                886
                            </div>
                            <span>
                                5小时前 [案例观点]
                            </span>
                        </div>
                    </div>
                    <div class="right">
                        <img src="./image/article_03.jpg" alt="">
                    </div>
                </div>
                <div class="items2">
                    <p>苍井空#互联网卖内衣全球
                        引爆声量飙至7.9亿</p>
                    <div class="pic">
                        <img src="./image/article_04.jpg" alt="">
                        <img src="./image/article_04.jpg" alt="">
                        <img src="./image/article_04.jpg" alt="">
                    </div>
                    <div class="bottom">
                        <div class="author">
                            <img src="./image/baga1.png" alt="">
                        </div>
                        陈正光
                        <div class="comment">
                            <img src="./image/pinglun.png" alt="">
                            6848
                        </div>
                        <div class="like">
                            <img src="./image/like_g.png" alt="">
                            4808
                        </div>
                        <div class="time"> 2天前 [案例观点]</div>
                    </div>
                </div>
                <div class="items">
                    <div class="left">
                        <p>#苍井空#互联网卖内衣全球
                            引爆声量飙至7.9亿
                        </p>
                        <div class="bottom">
                            <div class="like">
                                <img src="./image/like_g.png" alt="">
                                886
                            </div>
                            <span>
                                5小时前 [案例观点]
                            </span>
                        </div>
                    </div>
                    <div class="right">
                        <img src="./image/article_03.jpg" alt="">
                    </div>
                </div>
                <div class="items">
                    <div class="left">
                        <p>#苍井空#互联网卖内衣全球
                            引爆声量飙至7.9亿
                        </p>
                        <div class="bottom">
                            <div class="like">
                                <img src="./image/like_g.png" alt="">
                                886
                            </div>
                            <span>
                                5小时前 [案例观点]
                            </span>
                        </div>
                    </div>
                    <div class="right">
                        <img src="./image/article_03.jpg" alt="">
                    </div>
                </div>
                <div class="more">
                    加载更多
                </div>
            </div>
        </div>

        <footer class="footer">
            <a > 
                <img src="./image/02home_r.png" class="footerIcon">
                <p>首页</p>
            </a>
            <a>
                <img src="./image/03GIMC_g.png" class="footerIcon">
                <p>GIMC</p>
            </a>
            <a href="./html/article.html">
                <img src="./image/05article_g.png" class="footerIcon">
                <p>文章</p>
            </a>
            <a href="./html/resource.html">
                <img src="./image/07resou_g.png" class="footerIcon">
                <p>资源</p>
            </a>
            <a href="./html/lesson.html">
                <img src="./image/09college_g.png" class="footerIcon">
                <p>学院</p>
            </a>
        </footer>
    </div>

    <div class="search-box">
        <div class="input-bar">
            <img src="./image/login_close.png" alt="" id="closeBtn">
            <div class="input-con">
                <img src=".//image/fangdajing.png" alt="">
                <input type="text" placeholder="search">
            </div>
        </div>
        <div class="search-tips">
            <div class="title">热搜</div>
            <div class="item-box">
                <div class="items">项目管理</div>
                <div class="items">移动互联网</div>
                <div class="items">细分平台业务</div>
                <div class="items">O2O</div>
                <div class="items">媒介平台</div>
                <div class="items">项目管理</div>
                <div class="items">拥抱变革，创造未来</div>
                <div class="items">平台</div>
                <div class="items">上海金投赏创意奖</div>
            </div>
        </div>

    </div>

    <div class="login-page">
        <img src="./image/login_close.png" alt="" class="loginClose" id="loginClose">
        <div class="wrapper">
            <img src="./image/common_logo.png" alt="" class="logo">
            <div class="msg">
                <form action="">
                    <div class="item">
                        <label for="username">
                            <img src="./image/login_01.png" alt="">
                        </label>
                        <input type="text" id="username">
                    </div>
                    <div class="item">
                        <label for="psw">
                            <img src="./image/login_02.png" alt="">
                        </label>
                        <input type="password" id="psw">
                    </div>
                </form>
                <div class="forget-psw">
                    <img src="./image/login_03.png" alt="">
                    <span>忘记密码</span>
                </div>
            </div>
            <div class="btns">
                <div class="loginBtn" id="loginBtn">登陆</div>
                <div class="register">注册</div>
            </div>
        </div>
    </div>

    <div class="logined-page">
        <div class="input-bar">
            <img src="./image/login_close.png" alt="" id="closeLoginedBtn">
            <div class="input-con">
                <img src=".//image/fangdajing.png" alt="">
                <input type="text" placeholder="search">
            </div>
        </div>
        <div class="my-profile">
            <div class="avator">
                <img src="./image/head_portrait.png" alt="">
            </div>
            <div class="me">
                <div class="name">
                    <div class="username">
                        陈小敏
                    </div>
                    <div class="person-center">
                        个人中心&gt;
                    </div>
                </div>
                <div class="stars">
                    <img src="./image/star.png" alt="">
                    <img src="./image/star.png" alt="">
                    <img src="./image/star.png" alt="">
                    <img src="./image/star.png" alt="">
                </div>
                <div class="relation">
                    <div class="follows">
                        关注<span>36</span>
                    </div>
                    <span class="middile">|</span>
                    <div class="fans">
                        粉丝<span>290</span>
                    </div>
                </div>
            </div>
            <div class="btn-tool">
                <button>我的收藏</button>
                <button>我的发布</button>
            </div>
        </div>
        <div class="line"></div>
        <div class="menus">
            <div class="items">
                <div class="title">
                    GIMC
                    <img src="./image/drop_left.png" alt="">
                </div>
                <ul>
                    <li>省广介绍</li>
                    <li>新闻资讯</li>
                </ul>
            </div>
            <div class="items">
                <div class="title">
                    文章
                    <img src="./image/drop_left.png" alt="">
                </div>
            </div>
            <div class="items">
                <div class="title">
                    资源
                    <img src="./image/drop_left.png" alt="">
                </div>
            </div>
            <div class="items">
                <div class="title">
                    课程
                    <img src="./image/drop_left.png" alt="">
                </div>
            </div>
        </div>
        <div class="login-out">
            <button id="loginOutBtn">退出</button>
        </div>
    </div>
    <script src="./js/search.js"></script>
    <script src="./js/showLogin.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            // autoplay:true,
            loop : true,
            pagination: {
                el: '.swiper-pagination',
                // dynamicBullets: true,
            }
        })
    </script>
</body>

</html>